<template>
  <view class="container">
    <!-- 顶部余额信息 -->
    <view class="balance-box">
      <text class="title">可提现余额（元）</text>
      <view class="amount">
        <text><text class="price-amount">¥ </text>
          {{ Number(price)?.toFixed(2) }}</text>
      </view>
    </view>

    <!-- 提现操作框 -->
    <view class="withdraw-box">
      <view>
        <text>提现金额</text>
      </view>
      <view class="input-row">
        <text class="symbol">¥</text>
        <input class="amount-input" type="digit" v-model="amount" placeholder="请输入提现金额" />
        <text class="symbol" style="font-size: 14px" @click="amount = price">全部</text>
      </view>

      <view class="withdraw-to">
        <text>提现至</text>
        <view class="wechat">
<!--          <image src="@/static/wechat-icon.png" class="icon" />-->
          <text>微信零钱</text>
        </view>
      </view>

      <button class="submit-btn" @click="onSubmit">确认</button>

      <text class="tip" style="text-align: left">温馨提示：提现金额需大于<text style="color: #FF4444;">{{withdrawEveryLimit}}</text>元，每日提现上限为<text style="color: #FF4444;">{{withdrawDailyLimit}}</text>元，每次提现含<text style="color: #FF4444;">0.6%</text>的服务费（微信支付官方技术服务费），与乐码平台无关</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {balanceApi, getWalletInfoByOpenIdApi} from "@/api/pay";
import { onShow } from "@dcloudio/uni-app";
const price = ref(0)
const amount: any = ref("")

async function onSubmit() {
  if (!amount.value) {
    uni.showToast({ title: '请输入提现金额', icon: 'none' })
    return
  }
  if(Number(amount.value) < withdrawEveryLimit.value) {
    uni.showToast({ title: `提现金额不能小于${withdrawEveryLimit.value}元`, icon: 'none' })
    return
  }
  if(Number(amount.value) > Number(price.value)) {
    uni.showToast({ title: '提现金额不能大于余额', icon: 'none' })
    return;
  }
  if(Number(amount.value) > withdrawDailyLimit.value) {
    uni.showToast({ title: `提现金额不能大于${withdrawDailyLimit.value}元`, icon: 'none' })
    return
  }
  if (!amount.value) {}
  const res = await balanceApi({
    amount: amount.value,
    remark: "备注"
  })
  console.log(res, "res")
  if (res.code === 200) {
    if (uni.canIUse('requestMerchantTransfer')) {
      uni.requestMerchantTransfer({
        mchId: res.data.mchId,
        appId: "wxa8d26f697d0d840a",
        package: res.data.packageInfo,
        success: async () => {
          // res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
          uni.showToast({ title: '提现成功', icon: 'success' })
          uni.navigateBack({ delta: 1 });
          const res1 = await getWalletInfoByOpenIdApi();
          price.value = res1?.data?.balance || 0;
        },
        fail: (res: any) => {
          console.log('fail:', res);
          uni.showToast({ title: '提现失败', icon: 'none' })
        },
      });
    } else {
      uni.showModal({
        content: '你的微信版本过低，请更新至最新版本。',
        showCancel: false,
      });
    }
  } else {
    uni.showModal({
      content: res?.msg || "",
      showCancel: false,
    });
  }
}

const withdrawDailyLimit = ref(0)
const withdrawEveryLimit = ref(0)
onShow(() => {
  const pages = getCurrentPages();
  const currentPage: any = pages[pages.length - 1];
  const params = currentPage.options;
  price.value = params?.price || 0;
  withdrawDailyLimit.value = params.withdrawDailyLimit;
  withdrawEveryLimit.value = params.withdrawEveryLimit;
})
</script>

<style scoped lang="scss">
.container {
  background-color: #f2f2f2;
  min-height: 100vh;
}
.balance-box {
  background: linear-gradient(117deg, #5E84DE 0%, #5E81F5 29%, #4562F3 76%, #4762F4 101%);
  color: #fff;
  padding: 80rpx;
  height: 462rpx;
  .amount {
    font-size: 72rpx;
    font-weight: bold;
    margin-top: 40rpx;
    .price-amount {
      font-size: 40rpx;
    }
  }
}
.title {
  font-size: 26rpx;
  opacity: 0.8;
}

.withdraw-box {
  background-color: #fff;
  margin: 20rpx;
  padding: 48rpx;
  border-radius: 20rpx;
  position: relative;
  top: -200rpx;
}
.input-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 20rpx;
  margin-top: 80rpx;
}
.symbol {
  font-size: 72rpx;
  margin-right: 10rpx;
  color: #333333;
}
.amount-input {
  flex: 1;
  font-size: 36rpx;
  margin-left: 20rpx;
}
.withdraw-to {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40rpx 0;
  font-size: 28rpx;
}
.wechat {
  display: flex;
  align-items: center;
  color: #333333;
}
.icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 10rpx;
}
.submit-btn {
  background-color: #4088ff;
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  margin-top: 72rpx;
  height: 86rpx;
  line-height: 86rpx;
}
.tip {
  display: block;
  text-align: center;
  font-size: 24rpx;
  color: #666666;
  margin-top: 30rpx;
}
</style>
